<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>基本设置</span>
              <el-button class="button" type="text" @click="basicSettingDataFormVisible = true">编辑</el-button>
            </div>
          </template>
          <el-form ref="basicSettingForm" label-position="left" :model="basicSettingDataForm" label-width="120px">
            <el-form-item label="系统登录页标题">
              <el-input v-model="basicSettingDataForm.systemTitle" :disabled="basicSettingDataFormVisible === false" />
            </el-form-item>
            <el-form-item label="系统Logo">
              <single-upload
                v-model="basicSettingDataForm.systemLogo"
                :enabled="basicSettingDataFormVisible === false"
              />
              <span style="color: #dd1100">建议上传尺寸：128*128</span>
            </el-form-item>
            <el-form-item label="系统登录页背景">
              <single-upload
                v-model="basicSettingDataForm.systemBackground"
                :enabled="basicSettingDataFormVisible === false"
              />
              <span style="color: #dd1100;">建议上传尺寸：1920*1080</span>
            </el-form-item>
            <el-form-item label="总部电话">
              <el-input v-model="basicSettingDataForm.mobile" :disabled="basicSettingDataFormVisible === false" />
            </el-form-item>
            <el-form-item label="总部微信">
              <el-input v-model="basicSettingDataForm.wechatName" :disabled="basicSettingDataFormVisible === false" />
            </el-form-item>
            <el-form-item label="微信二维码">
              <single-upload v-model="basicSettingDataForm.qrCode" :enabled="basicSettingDataFormVisible === false" />
            </el-form-item>
            <el-form-item>
              <el-button v-show="basicSettingDataFormVisible" type="primary" @click="onSubmitBasicSetting">立即提交
              </el-button>
              <el-button v-show="basicSettingDataFormVisible" @click="cancelBasicSetting">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="10" :xs="24">
        <el-row>
          <el-col :span="24" :xs="24">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>公共配置设置</span>
                  <el-button class="button" type="text" @click="generalSettingFormVisible = true">编辑</el-button>
                </div>
              </template>
              <el-form ref="generalSettingForm" label-position="left" :model="generalSettingForm" label-width="120px">
                <el-form-item label="代理商充值折扣（单位：%）">
                  <el-input-number
                    v-model="generalSettingForm.recharge"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :disabled="generalSettingFormVisible === false"
                    controls-position="right"
                  /><br>
                  <span style="color: red">(注: 到账货款 = 实际充值货款 + 实际充值货款 * 充值折扣)</span>
                </el-form-item>
                <!--            <el-form-item label="合伙人充值折扣（单位：%）">-->
                <!--              <el-input-number-->
                <!--                v-model="generalSettingForm.hehuorenRecharge"-->
                <!--                :min="0"-->
                <!--                :precision="0"-->
                <!--                :step="1"-->
                <!--                :disabled="generalSettingFormVisible === false"-->
                <!--                controls-position="right"-->
                <!--              />-->
                <!--            </el-form-item>-->
                <!--            <el-form-item label="蓝宝充值折扣（单位：%）">-->
                <!--              <el-input-number-->
                <!--                v-model="generalSettingForm.lanbaoRecharge"-->
                <!--                :min="0"-->
                <!--                :precision="0"-->
                <!--                :step="1"-->
                <!--                :disabled="generalSettingFormVisible === false"-->
                <!--                controls-position="right"-->
                <!--              />-->
                <!--            </el-form-item>-->
                <el-form-item label="自动关闭订单（单位：m）">
                  <el-input-number
                    v-model="generalSettingForm.autoCancelOrder"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :disabled="generalSettingFormVisible === false"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="订单自动出库（单位：m）">
                  <el-input-number
                      v-model="generalSettingForm.autoOutOrder"
                      :min="0"
                      :precision="0"
                      :step="1"
                      :disabled="generalSettingFormVisible === false"
                      controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="自动确认收货天数（单位：D）">
                  <el-input-number
                    v-model="generalSettingForm.autoConfirmOrder"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :disabled="generalSettingFormVisible === false"
                    controls-position="right"
                  />
                </el-form-item>
                <el-form-item label="邀请人达标数量">
                  <el-input-number
                    v-model="generalSettingForm.flowerNum"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :disabled="generalSettingFormVisible === false"
                    controls-position="right"
                  />
                  <br>
                  <span style="color: #dd1100">注: 成功邀请指定数量的合伙人赠送一朵小红花</span>
                </el-form-item>
                <!--            <el-form-item label="积分数量">-->
                <!--              <el-input-number-->
                <!--                v-model="generalSettingForm.flowerToIntegral"-->
                <!--                :min="0"-->
                <!--                :precision="0"-->
                <!--                :step="1"-->
                <!--                :disabled="generalSettingFormVisible === false"-->
                <!--                controls-position="right"-->
                <!--              />-->
                <!--              <br>-->
                <!--              <span style="color: #dd1100">注: 一朵小红花兑换的积分数量</span>-->
                <!--            </el-form-item>-->
                <el-form-item>
                  <el-button v-show="generalSettingFormVisible" type="primary" @click="submitGeneralSetting">立即提交
                  </el-button>
                  <el-button v-show="generalSettingFormVisible" @click="cancelGeneralSetting">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :xs="24">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span>充值渠道配置设置</span>
                  <el-button class="button" type="text" @click="topUpChannelsSettingVisible = true">编辑</el-button>
                </div>
              </template>
              <el-form ref="dataForm" label-position="left" :model="topUpChannelsSettingForm" label-width="120px">
                <el-form-item label="银行卡开户人">
                  <el-input
                    v-model="topUpChannelsSettingForm.username"
                    :disabled="topUpChannelsSettingVisible === false"
                  />
                </el-form-item>
                <el-form-item label="银行卡开户行">
                  <el-input
                    v-model="topUpChannelsSettingForm.openingBank"
                    :disabled="topUpChannelsSettingVisible === false"
                  />
                </el-form-item>
                <el-form-item label="银行卡卡号">
                  <el-input
                    v-model="topUpChannelsSettingForm.bankCard"
                    :disabled="topUpChannelsSettingVisible === false"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button v-show="topUpChannelsSettingVisible" type="primary" @click="onSubmitTopUpChannelsSetting">
                    立即提交
                  </el-button>
                  <el-button v-show="topUpChannelsSettingVisible" @click="cancelTopUpChannelsSetting">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>短信宝配置设置</span>
              <el-button class="button" type="text" @click="smsBaoSettingDataFormVisible = true">编辑</el-button>
            </div>
          </template>
          <el-form ref="dataForm" label-position="left" :model="smsBaoSettingDataForm" label-width="140px">
            <el-form-item label="短信宝平台账号">
              <el-input
                v-model="smsBaoSettingDataForm.smsBaoUsername"
                :disabled="smsBaoSettingDataFormVisible === false"
              />
            </el-form-item>
            <el-form-item label="短信宝平台密码">
              <el-input
                v-model="smsBaoSettingDataForm.smsBaoPassword"
                :disabled="smsBaoSettingDataFormVisible === false"
              />
            </el-form-item>
            <el-form-item>
              <el-button v-show="smsBaoSettingDataFormVisible" type="primary" @click="onSubmitSmsBaoSetting">立即提交
              </el-button>
              <el-button v-show="smsBaoSettingDataFormVisible" @click="cancelSmsBaoSetting">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>物流配置设置</span>
              <el-button class="button" type="text" @click="kdniaoSettingDataFormVisible = true">编辑</el-button>
            </div>
          </template>
          <el-form
            ref="kdniaoSettingDataForm"
            label-position="left"
            :model="kdniaoSettingDataForm"
            label-width="140px"
          >
            <el-form-item label="快递鸟AppKey">
              <el-input v-model="kdniaoSettingDataForm.appKey" :disabled="kdniaoSettingDataFormVisible === false" />
            </el-form-item>
            <el-form-item label="快递鸟EBusinessID">
              <el-input
                v-model="kdniaoSettingDataForm.appSecret"
                :disabled="kdniaoSettingDataFormVisible === false"
              />
            </el-form-item>
            <el-form-item>
              <el-button v-show="kdniaoSettingDataFormVisible" type="primary" @click="onSubmitKdniaoSetting">立即提交
              </el-button>
              <el-button v-show="kdniaoSettingDataFormVisible" @click="cancelKdniaoSetting">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>服务协议</span>
              <el-button class="button" @click="submitServiceAgreement">提交</el-button>
            </div>
          </template>
          <tinymce v-model="serviceAgreement" :height="800" />
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>隐私政策</span>
              <el-button class="button" @click="submitPrivacyAgreement">提交</el-button>
            </div>
          </template>
          <tinymce v-model="privacyAgreement" :height="800" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>授权书</span>
              <el-button class="button" @click="submitGrant">提交</el-button>
            </div>
          </template>
          <tinymce v-model="grant" :height="800" />
        </el-card>
      </el-col>
    </el-row>
    <back-to-top />
  </div>
</template>

<script>
import SingleUpload from '@/components/Upload/SingleUpload'
import Tinymce from '@/components/Tinymce'
import {
  getBasicSetting,
  getKdniaoSetting, getPrivacyAgreementSetting, getServiceAgreementSetting, getSmsBaoSetting, getsTopUpChannelsSetting,
  saveBasicSetting, getGrantSetting, getAgentSetting,
  saveKdniaoSetting, saveSmsBaoSetting, saveTopUpChannelsSetting, savePrivacyAgreementSetting, saveGrantSetting,
  saveServiceAgreementSetting, saveAgentSetting, saveGeneralSetting, getGeneralSetting
} from '@/api/admin/sysConfig'
import BackToTop from '@/components/BackToTop'

export default {
  name: 'Setting',
  components: { BackToTop, Tinymce, SingleUpload },
  data() {
    return {
      qrCode: [],
      basicSettingDataForm: {
        systemTitle: undefined,
        systemLogo: undefined,
        systemBackground: undefined,
        mobile: undefined,
        wechatName: undefined,
        qrCode: undefined
      },
      basicSettingDataFormVisible: false,
      kdniaoSettingDataForm: {
        appKey: undefined,
        appSecret: undefined
      },
      kdniaoSettingDataFormVisible: false,
      smsBaoSettingDataForm: {
        smsBaoUsername: undefined,
        smsBaoPassword: undefined
      },
      smsBaoSettingDataFormVisible: false,
      topUpChannelsSettingVisible: false,
      topUpChannelsSettingForm: {
        username: undefined,
        openingBank: undefined,
        bankCard: undefined
      },
      agentSettingDataFormVisible: false,
      agentSettingDataForm: {
        name: undefined,
        price: undefined
      },
      generalSettingFormVisible: false,
      generalSettingForm: {
        recharge: 0,
        hehuorenRecharge: 0,
        lanbaoRecharge: 0,
        autoOutOrder: 30,
        autoCancelOrder: 30,
        autoConfirmOrder: 7,
        flowerNum: 6,
        flowerToIntegral: 10
      },
      dataForm: {},
      serviceAgreement: undefined,
      privacyAgreement: undefined,
      grant: undefined
    }
  },
  async created() {
    this.getBasicSettingInfo()
    this.getKdniaoSettingInfo()
    this.getSmsBaoSettingInfo()
    this.getTopUpChannelsSettingInfo()
    this.getServiceAgreementInfo()
    this.getPrivacyAgreementInfo()
    this.getGrantInfo()
    this.getAgentSettingInfo()
    this.getGeneralSettingInfo()
  },
  methods: {
    onSubmitBasicSetting() {
      saveBasicSetting(this.basicSettingDataForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getBasicSettingInfo()
        this.basicSettingDataFormVisible = false
      })
    },
    getBasicSettingInfo() {
      getBasicSetting().then(res => {
        this.basicSettingDataForm = res.data
      })
    },
    cancelBasicSetting() {
      getBasicSetting().then(res => {
        this.basicSettingDataForm = res.data
      })
      this.basicSettingDataFormVisible = false
    },
    onSubmitKdniaoSetting() {
      saveKdniaoSetting(this.kdniaoSettingDataForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getKdniaoSettingInfo()
        this.kdniaoSettingDataFormVisible = false
      })
    },
    getKdniaoSettingInfo() {
      getKdniaoSetting().then(res => {
        this.kdniaoSettingDataForm = res.data
      })
    },
    cancelKdniaoSetting() {
      getKdniaoSetting().then(res => {
        this.kdniaoSettingDataForm = res.data
      })
      this.kdniaoSettingDataFormVisible = false
    },
    onSubmitAgentSetting() {
      saveAgentSetting(this.agentSettingDataForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getAgentSettingInfo()
        this.agentSettingDataFormVisible = false
      })
    },
    getAgentSettingInfo() {
      getAgentSetting().then(res => {
        this.agentSettingDataForm = res.data
      })
    },
    cancelAgentSetting() {
      getAgentSetting().then(res => {
        this.agentSettingDataForm = res.data
      })
      this.agentSettingDataFormVisible = false
    },
    onSubmitSmsBaoSetting() {
      saveSmsBaoSetting(this.smsBaoSettingDataForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getSmsBaoSettingInfo()
        this.smsBaoSettingDataFormVisible = false
      })
    },
    getSmsBaoSettingInfo() {
      getSmsBaoSetting().then(res => {
        this.smsBaoSettingDataForm = res.data
      })
    },
    cancelSmsBaoSetting() {
      getSmsBaoSetting().then(res => {
        this.smsBaoSettingDataForm = res.data
      })
      this.smsBaoSettingDataFormVisible = false
    },
    onSubmitTopUpChannelsSetting() {
      saveTopUpChannelsSetting(this.topUpChannelsSettingForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getTopUpChannelsSettingInfo()
        this.topUpChannelsSettingVisible = false
      })
    },
    getTopUpChannelsSettingInfo() {
      getsTopUpChannelsSetting().then(res => {
        this.topUpChannelsSettingForm = res.data
      })
    },
    cancelTopUpChannelsSetting() {
      getsTopUpChannelsSetting().then(res => {
        this.topUpChannelsSettingForm = res.data
      })
      this.topUpChannelsSettingVisible = false
    },
    getServiceAgreementInfo() {
      getServiceAgreementSetting().then(res => {
        this.serviceAgreement = res.data.serviceAgreement
      })
    },
    getPrivacyAgreementInfo() {
      getPrivacyAgreementSetting().then(res => {
        this.privacyAgreement = res.data.privacyAgreement
      })
    },
    getGrantInfo() {
      getGrantSetting().then(res => {
        this.grant = res.data.grant
      })
    },
    submitServiceAgreement() {
      console.log(this.serviceAgreement)
      saveServiceAgreementSetting({ serviceAgreement: this.serviceAgreement }).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getServiceAgreementInfo()
      })
    },
    submitGrant() {
      console.log(this.grant)
      saveGrantSetting({ grant: this.grant }).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getGrantInfo()
      })
    },
    submitPrivacyAgreement() {
      savePrivacyAgreementSetting({ privacyAgreement: this.privacyAgreement }).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getPrivacyAgreementInfo()
      })
    },
    getGeneralSettingInfo() {
      getGeneralSetting().then(res => {
        this.generalSettingForm = res.data
      })
    },
    cancelGeneralSetting() {
      getGeneralSetting().then(res => {
        this.generalSettingForm = res.data
      })
      this.generalSettingFormVisible = false
    },
    submitGeneralSetting() {
      saveGeneralSetting(this.generalSettingForm).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getGeneralSettingInfo()
        this.generalSettingFormVisible = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
